<template>
  <div class="my-container">
    <div class="info-container">
      <div class="bg-container"></div>
      <div class="main-container">
        <div class="avatar-container">
          <img :src="userInfo && userInfo.headimgurl.includes('thirdwx.qlogo.cn') ? userInfo.headimgurl : imgUrl + userInfo.headimgurl" alt />
        </div>
        <div class="integral" @click="integralClick">积分</div>
        <div class="name">{{ userInfo && userInfo.userreal }}</div>
        <div class="number">{{ userInfo && userInfo.telephone }}</div>
      </div>
    </div>
    <div class="order-container">
      <div class="title">
        <span></span> 我的订单
      </div>
      <div class="main">
        <div class="order-item" @click="order(0)">
          <img src="@/assets/icon/wait_payment.png" alt />
          <div class="name">待付款</div>
        </div>
        <div class="order-item" @click="order(1)">
          <img src="@/assets/icon/wait_ship.png" alt />
          <div class="name">待发货</div>
        </div>
        <div class="order-item" @click="order(2)">
          <img src="@/assets/icon/wait_receipt.png" alt />
          <div class="name">待收货</div>
        </div>
        <div class="order-item" @click="order(6)">
          <img src="@/assets/icon/wait_eval.png" alt />
          <div class="name">待评价</div>
        </div>
        <div class="order-item" @click="order(5)">
          <img src="@/assets/icon/wait_after_sale.png" alt />
          <div class="name">退款/售后</div>
        </div>
      </div>
    </div>
    <div class="select-container">
      <div class="select-item" @click="customerServiceClick">
        <img src="@/assets/icon/2.png" alt />
        <span class="name">联系客服</span>
        <span class="iconfont icongengduo"></span>
      </div>
      <div class="select-item" @click="goTo('/collect')">
        <img src="@/assets/icon/4.png" alt />
        <span class="name">我的收藏</span>
        <span class="iconfont icongengduo"></span>
      </div>
      <div class="select-item" @click="goTo('/discount')">
        <img src="@/assets/icon/5.png" alt />
        <span class="name">我的优惠</span>
        <span class="iconfont icongengduo"></span>
      </div>
      <div class="select-item" @click="goTo('/address')">
        <img src="@/assets/icon/6.png" alt />
        <span class="name">收货地址</span>
        <span class="iconfont icongengduo"></span>
      </div>
      <div class="select-item" @click="goTo('/philanthropy')">
        <img src="@/assets/icon/1.png" alt />
        <span class="name">公益信息</span>
        <span class="iconfont icongengduo"></span>
      </div>
      <div class="select-item" @click="goTo('/setUp')">
        <img src="@/assets/icon/3.png" alt />
        <span class="name">设置</span>
        <span class="iconfont icongengduo"></span>
      </div>
    </div>
    <div class="login-out-btn" @click="loginOut">退出</div>

    <customerService ref="customerService"/>
  </div>
</template>

<script>
import { Cache } from '@utils'
import customerService from '@components/customerService'

export default {
  components: {
    customerService
  },
  data() {
    return {};
  },
  computed: {
    userInfo() {
      return this.$store.state.userData;
    },
    imgUrl() {
      return this.$imgUrl;
    }
  },
  async created() {
    if (!this.userInfo && !this.$route.query.memberid) {
      this.$router.push("/login");
    } else {
      const userInfo = await this.$fetchGet('/home/member/index')
      if (!userInfo.success) {
        this.$toast(userInfo.msg)
        return
      }
      this.$store.commit('changeUserData', userInfo.data.member)
      this.$store.commit('changeCartList')
      console.log(this.$route.query.memberid)
    }
  },
  methods: {
    integralClick () {
      this.$router.push('/integralList')
    },
    customerServiceClick () {
      this.$refs['customerService'].open()
    },
    goTo(path) {
      this.$router.push(path);
    },
    loginOut() {
      this.$dialog.confirm({
        title: "温馨提示",
        message: "是否退出？"
      }).then(async () => {
        Cache.remove('userData')
        this.$store.commit('changeUserData', null)
        this.$router.push("/login");
      }).catch(() => {
        // on cancel
      });
      
    },
    order(index) {
      this.$router.push({
        path: "/order",
        query: {
          index: index
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-container {
  background: #fafafa;
  height: calc(100vh - 100px);
  position: relative;
  overflow-y: auto;
  .info-container {
    position: relative;
    .bg-container {
      position: absolute;
      top: 0;
      width: 100vw;
      height: 250px;
      background: url("~@/assets/icon/my_bg.png");
      background-size: 100% 100%;
    }
    .main-container {
      width: 80vw;
      padding: 20px;
      top: 100px;
      left: 10vw;
      border-radius: 10px;
      box-shadow: 0 0 10px #888;
      z-index: 2;
      background: #fff;
      position: absolute;
      height: 150px;
      .avatar-container {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        top: -75px;
        border: 1px solid #418fb3;
      }
      .integral {
        position: absolute;
        top: 50px;
        right: 0;
        background: linear-gradient(to right, #fc8f04, #f71c19);
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      .name {
        top: 30px;
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        left: 200px;
      }
      .number {
        font-size: 25px;
        font-weight: 500;
        position: absolute;
        left: 200px;
        top: 70px;
      }
    }
  }
  .order-container {
    width: 80vw;
    margin: 300px 0 50px 10vw;
    .title {
      font-size: 30px;
      font-weight: bold;
      line-height: 30px;
      margin-bottom: 20px;
      span {
        vertical-align: top;
        display: inline-block;
        width: 5px;
        height: 30px;
        background: #f82724;
        margin-right: 10px;
      }
    }
    .main {
      padding: 20px 0;
      border-radius: 10px;
      box-shadow: 0 0 10px #888;
      display: flex;
      .order-item {
        flex: 1;
        padding: 0 10px;
        .name {
          font-size: 15px;
          font-weight: 500;
          color: #505050;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
    // height: ;
  }
  .select-container {
    width: 80vw;
    margin: 50px 0 50px 10vw;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #888;
    .select-item {
      border-bottom: 1px solid #d8d8d8;
      display: flex;
      line-height: 70px;
      padding: 10px 0;
      &:last-child {
        border-bottom: none;
      }
      img {
        width: 50px;
        height: 50px;
      }
      .name {
        flex: 1;
        margin-left: 20px;
        font-size: 30px;
        font-weight: 500;
      }
      .iconfont {
        color: #d8d8d8;
        font-size: 25px;
        font-weight: 500;
      }
    }
  }
  .login-out-btn {
    width: 80vw;
    margin-left: 10vw;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(to right, #fc8f04, #f71c19);
    border-radius: 50px;
    font-size: 35px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 10px;
  }
}
</style>